<div class="container">
  <div class="view-module-header">
    <div class="navbar-search">
      <div class="search-l">
        <nz-select class="fl mr20" nzShowSearch nzAllowClear nzPlaceHolder="性别" [(ngModel)]="params.gender"
          (ngModelChange)="onSearch($event, 'gender')">
          <nz-option nzLabel="男" nzValue="男"></nz-option>
          <nz-option nzLabel="女" nzValue="女"></nz-option>
        </nz-select>
        <div class="example-input mr20">
          <nz-input-group [nzSuffix]="nameTemplate" nzSize="default">
            <input nz-input placeholder="姓名" [(ngModel)]="params.name" (change)="onSearch(params.name, 'name')" />
          </nz-input-group>
          <ng-template #nameTemplate>
            <i class="iconfont" [ngClass]="params.name.length > 0 ? 'icon-close-circle-line' : ''"
              style="font-size: 10px; color: #ddd;" (click)="clear(params.name, 'name')"></i>
          </ng-template>
        </div>
        <div class="example-input mr20">
          <nz-input-group [nzSuffix]="phoneTemplate" nzSize="default">
            <input nz-input placeholder="电话" nzSize="default" [(ngModel)]="params.phone"
              (change)="onSearch(params.phone, 'phone')" />
          </nz-input-group>
          <ng-template #phoneTemplate>
            <i class="iconfont" [ngClass]="params.phone.length > 0 ? 'icon-close-circle-line' : ''"
              style="font-size: 10px; color: #ddd;" nzTheme="outline" (click)="clear(params.phone, 'phone')"></i>
          </ng-template>
        </div>
        <label class="mr10">创建时间：</label>
        <nz-range-picker [nzFormat]="dateFormat" [(ngModel)]="dateRange" (ngModelChange)="onSearch($event, 'data')">
        </nz-range-picker>
      </div>
    </div>
  </div>
  <div class="view-module-container">
    <nz-table #rowSelectionTable [nzFrontPagination]="false" [nzData]="listOfData" [nzLoading]="loading"
      [nzTotal]="total" [(nzPageIndex)]="params.pageIndex" [(nzPageSize)]="params.countOfPage"
      [nzShowQuickJumper]="true" [nzShowSizeChanger]="true" (nzPageIndexChange)="changePageIndex($event)"
      (nzPageSizeChange)="changePageSize($event)">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>电话</th>
          <th>创建时间</th>
          <th>所属部门</th>
          <th>状态</th>
          <th [nzAlign]="'center'">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of listOfData; let i=index">
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.phone}}</td>
          <td>{{item.createTime | date:'yyyy-MM-dd HH:mm'}}</td>
          <td>{{item.depName}}</td>
          <td>{{item.status == 0 ? '启用' : '禁用'}}</td>
          <td [nzAlign]="'center'">
            <a nz-button nzType="link" (click)="showModal(item)">详情</a>

            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="addEditData(item.id)">编辑</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" (click)="clickStatus(item)">{{item.status == 0 ? '禁用' : '启用'}}</a>
            <nz-divider nzType="vertical"></nz-divider>
            <a nz-button nzType="link" nzDanger (click)="delListItem(item.id, item.name, i)">删除</a>

          </td>

        </tr>
      </tbody>
    </nz-table>
  </div>
</div>

<nz-drawer [nzClosable]="false" [nzWidth]="400" [nzVisible]="visible" nzPlacement="right" nzTitle="人员详情"
  (nzOnClose)="close()">
  <zepride-drawer-modal [UserInfo]='personnelInfo' [id]='id' [TreeInfo]='TreeInfo' [treeList]='treeList'
    [presentId]='presentId' [orgTreeId]='orgTreeId' [objectName]='objectName' (refresh)="getOrganizationTrees()">
  </zepride-drawer-modal>
</nz-drawer>